<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书管理</title>
    <!-- 图标组件库 -->
    <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3701801_12u2357o4ba.css">
    <link rel="stylesheet" href="../css/sidebar.css">
    <link rel="stylesheet" href="../css/book.css">
    <script>
        window.onload = function(){
            var h3 = document.getElementById("addH3");
            const msg = h3.getAttribute("msg");
            if(msg!=null){
                alert(msg);
            }


            var uh3 = document.getElementById("updateH3");
            const msg2 = uh3.getAttribute("msg");
            if(msg2!=null){
                alert(msg2);
            }
        };

    </script>
</head>
<body>


    
 
    <nav class="sidebar close">
        <header>
            <div class="user-info">
                <span class="image">
                    <img src="../img/tx.JPG" alt="">
                </span>
                <div class="text nickname">
                    <span class="name">[[${session.name}]]</span>
                    <span class="identity" th:text="${session.identity}">图书管理员</span>
                </div>
            </div>

            <i class="toggle iconfont icon-xiangyou1"></i>
        </header>

        <div class="menu-bar">
            <div class="menu">
                <ul class="menu-links">
                    <li class="nav-link">
                        <a th:href="@{/admin/home}">
                            <i class="iconfont icon-home icon"></i>
                            <span class="text nav-text">回到主页</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/userManage}">
                            <i class="iconfont icon-yonghuguanli icon"></i>
                            <span class="text nav-text">用户管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/bookManage}">
                            <i class="icon iconfont icon-tubiaozhizuomoban-37"></i>
                            <span class="text nav-text">图书管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/problemManage}">
                            <i class="icon iconfont icon-guizeguanli"></i>
                            <span class="text nav-text">反馈管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/approval}">
                            <i class="icon iconfont icon-shenpijieyue"></i>
                            <span class="text nav-text">审批借阅</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/adminManage}">
                            <i class="iconfont icon icon-guanliyuan"></i>
                            <span class="text nav-text">管理员管理</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a href="#">
                            <i class=" icon iconfont icon-aixin1"></i>
                            <span class="text nav-text">特别关心</span>
                        </a>
                    </li>
                    <li class="nav-link">
                        <a th:href="@{/admin/music}">
                            <i class="icon iconfont icon-yinle"></i>
                            <span class="text nav-text">音乐</span>
                        </a>
                    </li>

                </ul>
            </div>

            <div class="bottom-content">
                <li>
                    <a th:href="@{/logout}">
                        <i class="icon iconfont icon-tuichu"></i>
                        <span class="text nav-text">退出登录</span>
                    </a>
                </li>
                <li class="mode">
                    <div class="sun-moon">
                        <i class="icon iconfont icon-a-icon_wananyueliangshuimian moon"></i>
                        <i class="icon iconfont icon-taiyang-copy sun"></i>
                    </div>
                    <span class="mode-text text">夜间模式</span>
                    <div class="toggle-switch">
                        <span class="switch"></span>
                    </div>
                </li>
            </div>
        </div>
    </nav>

    <section class="home">
        <div class="operation">
            <ul>
                <li class="searchBox">
                    <input class="searchBookText" type="text" placeholder="搜索图书">
                    <button class="searchBookBtn">
                        <i class="iconfont icon-sousuo icon"></i>
                    </button>
                </li>
                <li>
                    <a id="addBook">添加一本图书</a>
                </li>
            </ul>
            
        </div>
        <div class="bookList">
            <table>
                <tr>
                    <th>图书id</th>
                    <th>图书名</th>
                    <th>作者名</th>
                    <th>库存数量</th>
                    <th>已借数量</th>
                    <th>借阅次数</th>
                    <th>图书出版社</th>
                    <th colspan="2">操作</th>
                </tr>
                <tr th:each="book:${pageInfo.list}">
                    <td>[[${book.bid}]]</td>
                    <td>[[${book.name}]]</td>
                    <td>[[${book.author}]]</td>
                    <td>[[${book.num}]]</td>
                    <td>[[${book.remainder}]]</td>
                    <td>[[${book.times}]]</td>
                    <td>[[${book.press}]]</td>
                    <td><a class="delete" th:bid="${book.bid}">删除</a></td>
                    <td><a class="update" th:bid="${book.bid}" th:name="${book.name}"
                           th:author="${book.author}"th:num="${book.num}"th:remainder="${book.remainder}"
                           th:times="${book.times}" th:press="${book.press}" th:address="${book.address}" id="updateBook">修改</a></td>
                </tr>

                
            </table>
        </div>

        <!-- 分页条导航条 -->
       <div class="page-nav-wrapper">
           <nav class="page-nav">
               <!-- 页面信息 -->
               <div class="page-info">
                   <span class="now-page">当前为第[[${pageInfo.pageNum}]]页</span>
                   <span class="page-number">共 [[${pageInfo.pages}]] 页</span>
               </div>
               <ul class="pagination">
                   <li class="page-item"><a class="page-link" th:href="@{/admin/bookManage(pageNum=${pageInfo.hasPreviousPage}?${pageInfo.prePage}:1)}">Previous</a></li>
                   <!--                <li class="page-item"><a class="page-link" href="#">1</a></li>-->
                   <!--//导航页-->
                   <li th:each="nav:${pageInfo.navigatepageNums}" class="page-item">
                       <a th:href="'/library/admin/bookManage?pageNum='+${nav}" th:text="${nav}" class="page-link"></a>
                   </li>
                   <li class="page-item"><a class="page-link" th:href="@{/admin/bookManage(pageNum=${pageInfo.hasNextPage}?${pageInfo.nextPage}:${pageInfo.pages})}">Next</a></li>
               </ul>
           </nav>
    </div>

    </section>

    <div class="addBook-wrapper">
        <div class="addBook">
            <h3 id="addH3" th:msg="${addMsg}">添加图书</h3>
            <form th:action="@{/admin/addBook}">
                图书名：<input type="text" name="name" class="name" id="bookName"><br>
                作者名：<input type="text" name="author" class="author" id="author"><br>
                库存数量：<input type="text" name="num" class="num" id="num"><br>
                借出数量：<input type="text" name="remainder" class="remainder" id="remainder"><br>
                图书图片：<input type="text" name="address" class="address" ><br>
                图书出版社：<input type="text" name="press" class="press" id="press"><br>
                <button class="cancle" type="button">取消</button>
                <button class="addBtn" id="addBtn">确定</button>
            </form>
        </div>
    </div>
    <div class="updateBook-wrapper">
        <div class="updateBook">
            <h3  id="updateH3" th:msg="${updateMsg}">修改图书</h3>
            <form id="updateForm" th:action="@{/admin/updateBook}">
                图书id:<input type="text" name="bid" class="bid"><br>
                图书名：<input type="text" name="name" class="name"><br>
                作者名：<input type="text" name="author" class="author"><br>
                库存数量：<input type="text" name="num" class="num"><br>
                借出数量：<input type="text" name="remainder" class="remainder"><br>
                图书图片：<input type="text" name="address" class="address" ><br>
                图书出版社：<input type="text" name="press" class="press" ><br>
                <button class="cancle" type="button">取消</button>
                <button class="updateBtn" id="updateBtn">确定</button>
            </form>
        </div>
    </div>

    <script th:src="@{/script/sidebar.js}"></script>
    <script th:src="@{/script/book.js}"></script>
</body>
</html>